<template>
  <div class="hello">
    <h1>欢迎光临_Vue开发的收银系统_水果店</h1>
    <div><hr>
      <p> <strong>苹果10￥/斤，折扣&lt;8折&gt;</strong> </p><hr>
      <p>请输入你要购买的斤数 <input type="text" v-model="jin"> </p><hr>
      <p><button @click="btn">结账买单</button> </p><hr>
      <p>结账单：总价：{{ all }}元，折价后：{{ now }}元，省了：{{ out }}元</p><hr>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Task1',
    data() {
      return {
        all:0,
        now:0,
        out:0,
        jin:''
      }
    },
    methods:{
      btn(){
        this.all = this.jin * 10
        this.now = this.jin * 0.08 *100
        this.out = this.all - this.now
      }
    }
  
}
</script>

<style scoped>
  h1{
    text-align: center;
  }
  div{
    margin: auto;
    width: 800px;
    text-align: center;
  }
 
</style>
